import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

///
/// 左滑抽屉
///
class LeftDrawerFrame extends StatefulWidget {
  final PreferredSizeWidget? appBar;
  final Widget? mainWidget;
  final Widget? drawerWidget;

  const LeftDrawerFrame(
      {Key? key, this.appBar, this.mainWidget, this.drawerWidget})
      : super(key: key);

  @override
  _LeftDrawerFrameState createState() => _LeftDrawerFrameState();
}

class _LeftDrawerFrameState extends State<LeftDrawerFrame> {
  final _allPages = [
    Container(),
    Container(),
    Container(),
    Container(),
  ];
  var _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      // 添加抽屉插件，重写构造方法，设置宽度比例并设置抽屉内容样式
      drawer: SmartDrawer(
        widthPercent: 0.7,
        child: displayDrawerData(),
      ),
      key: _scaffoldKey,
      appBar: widget.appBar ?? AppBar(title: const Text("左滑抽屉")),
      body: _allPages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        unselectedItemColor: Colors.grey,
        selectedItemColor: Colors.blue,
        /*unselectedLabelStyle:TextStyle(
          color: Colors.black
        ),*/
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "首页",
            //backgroundColor:Colors.blue
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: "通讯录",
            //backgroundColor:Colors.blue
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.find_in_page),
            label: "发现",
            //backgroundColor:Colors.blue
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.flip_outlined),
            label: "我的",
            //backgroundColor:Colors.blue
          ),
        ],
        onTap: (index) {
          setState(() {
            debugPrint("the index is :$index");
            _currentIndex = index;
          });
        },
      ),

      // body: Flex(
      //   direction: Axis.vertical,
      //   children: <Widget>[
      //     Expanded(
      //       flex: 1,
      //       child: GestureDetector(
      //         onTap: () {
      //           // 点击按钮弹出抽屉
      //           _scaffoldKey.currentState!.openDrawer();
      //         },
      //         child: widget.mainWidget ?? Container(),
      //       ),
      //     ),
      //   ],
      // ),
    );
  }

  Widget displayDrawerData() {
    return widget.drawerWidget ?? Container(color: Colors.red);
  }

  void didSelectPage(int page) {
    setState(() {
      // currentIndex = page;
    });
  }

  @override
  void onClickDrawerPersonCallBack() {
    _scaffoldKey.currentState!.openDrawer();
  }
}

class SmartDrawer extends StatelessWidget {
  final double elevation;

  /// 设置展示内容
  final Widget child;
  final String? semanticLabel;

  /// 设置宽度比例
  final double widthPercent;

  const SmartDrawer({
    Key? key,
    this.elevation = 16.0,
    required this.child,
    this.semanticLabel,
    this.widthPercent = 0.7, // 默认比例
  })  :

        ///new start
        assert(widthPercent != null && widthPercent < 1.0 && widthPercent > 0.0)

        ///new end
        ,
        super(key: key);

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterialLocalizations(context));
    String label = semanticLabel ?? "";
    switch (defaultTargetPlatform) {
      case TargetPlatform.iOS:
        label = semanticLabel ?? "";
        break;
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
        label =
            (semanticLabel ?? MaterialLocalizations.of(context).drawerLabel);
        break;
      case TargetPlatform.linux:
        // TODO: Handle this case.
        break;
      case TargetPlatform.macOS:
        // TODO: Handle this case.
        break;
      case TargetPlatform.windows:
        // TODO: Handle this case.
        break;
    }

    /// 获取宽度
    final double _width = MediaQuery.of(context).size.width * widthPercent;

    return Semantics(
      scopesRoute: true,
      namesRoute: true,
      explicitChildNodes: true,
      label: label,
      child: ConstrainedBox(
        constraints: BoxConstraints.expand(width: _width),
        child: Material(
          elevation: elevation,
          child: child,
        ),
      ),
    );
  }
}
